<template>
  <div class="container-box">
    <el-card class="box-card" v-for="item in this.cardList" shadow="hover">
      <el-row class="card-name">
        <el-col :span="24"><div class="grid-content bg-purple-dark">{{item.prdName}}</div></el-col>
      </el-row>
      <el-row class="card-message">
        <el-col :span="12"><div class="grid-content bg-purple">
          <p>高度：{{item.height}}mm</p>
          <p>宽度：{{item.width}}mm</p>
          <p>厚度：{{item.depth}}mm</p>
          <p>重量：{{item.weight}}g</p>
          <el-button type="text" @click="open" style="color:#409EFF" class="card-btn">配置详情</el-button>
        </div></el-col>
        <el-col :span="12"><div class="grid-content bg-purple-light">
          <div class="crad-image">
            <img :src="item.imgUrl">
          </div>
        </div></el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
  export default {
    name: 'Samsung',
    data() {
      return {
        cardList: [
          {
            "id": 1,
            "prdName": "S20 Ultra",
            "imgUrl": require("../../assets/img/samsung/s20ultra.jpg"),
            "height": 160.8,
            "width": 78.1,
            "depth": 7.4,
            "weight": 226,
          },
          {
            "id": 2,
            "prdName": "S21",
            "imgUrl": require("../../assets/img/samsung/s21.jpg"),
            "height": 150.9,
            "width": 75.7,
            "depth": 8.3,
            "weight": 194,
          },
          {
            "id": 3,
            "prdName": "S20",
            "imgUrl": require("../../assets/img/samsung/s20.jpg"),
            "height": 143.6,
            "width": 70.9,
            "depth": 7.7,
            "weight": 174,
          },
          {
            "id": 4,
            "prdName": "S10",
            "imgUrl": require("../../assets/img/samsung/s10.jpg"),
            "height": 138.4,
            "width": 67.3,
            "depth": 7.3,
            "weight": 148,
          },
          {
            "id": 5,
            "prdName": "S9",
            "imgUrl": require("../../assets/img/samsung/s9.jpg"),
            "height": 138.3,
            "width": 67.1,
            "depth": 7.1,
            "weight": 138,
          },
          {
            "id": 6,
            "prdName": "S8",
            "imgUrl": require("../../assets/img/samsung/s8.jpg"),
            "height": 138.1,
            "width": 67.0,
            "depth": 6.9,
            "weight": 129,
          },
        ]
      };
    },
    methods: {
      open() {
        const h = this.$createElement;
        this.$msgbox({
          title: '消息',
          message: h('p', null, [
            h('span', null, '内容可以是 '),
            h('i', { style: 'color: teal' }, 'VNode')
          ]),
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              instance.confirmButtonLoading = true;
              instance.confirmButtonText = '执行中...';
              setTimeout(() => {
                done();
                setTimeout(() => {
                  instance.confirmButtonLoading = false;
                }, 300);
              }, 3000);
            } else {
              done();
            }
          }
        }).then(action => {
          this.$message({
            type: 'info',
            message: 'action: ' + action
          });
        });
      }
    }
  };
</script>

<style scoped>
  .el-card__body {
    padding-bottom: 0;
  }
  .card-name{
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 5px;
    color: #606266;
  }
  .card-message,.card-btn{
    font-size: 13px;
    color: #606266;
  }
  .container-box{
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
  }
  .box-card {
    width: 30%;
    margin: 0 3% 3% 0;
  }
  .crad-image{
    width: 100%;
    height: auto;
  }
  .crad-image img{
    width: 100%;
    height: auto;
  }
</style>
